{% extends "base.html" %}
{% load static %}
{% block title %}
  首页
{% endblock %}
{% block content %}
<head>
  <style>
    .module {
      cursor: pointer;
      text-align: center;
      padding: 20px;
      border: 1px solid rgba(0, 0, 0, 0.3);
      border-radius: none;
      background-color:rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ ;
      transition: transform 0.2s;
      height: 100%;
    }
    .module:hover {
      transform: scale(1.05);
    }
    .module img {
      max-width: 100%;
      height: auto;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container-fluid p-5" style="height: 710px;">
    <h1 class="text-center mb-4">欢迎来到恒恒星球</h1>
    <div class="row justify-content-center">
      <div class="col-lg-4 col-md-6"  style="top: 30px;">
        <div class="module" onclick="window.location.href='productsApp/products/<str:productName>/'">
          <img style="width: 500px;height: 500px;" src="/static/img/博客.png" alt="Module 1 Image">
          <h3 class="mt-3" style="color: aliceblue;">博客分类</h3>
        </div>
      </div>
      <div class="col-lg-4 col-md-6" style="top: 30px;">
        <div class="module" onclick="window.location.href='contactApp/contact/'">
          <img style="width: 500px;height: 500px;" src="/static/img/联系我们.png" alt="Module 2 Image">
          <h3 class="mt-3" style="color: aliceblue;">联系我们</h3>
        </div>
      </div>
      <div class="col-lg-4 col-md-6" style="top: 30px;">
        <div class="module" onclick="window.location.href='scienceApp/science/'">
          <img style="width: 500px;height: 500px;" src="/static/img/数据统计.jpg" alt="Module 3 Image">
          <h3 class="mt-3" style="color: aliceblue;">数据统计</h3>
        </div>
      </div>
    </div>
  </div>


  <!--登录注册-->

  <div  style="width: 70px; position:fixed; top:15px; right: 140px;" class="form-group">
    <a href="{% url 'homeApp:denglu'%}" class="btn btn-primary btn-block">登录</a>
  </div>
  <div style="width: 70px; position:fixed; top:15px; right: 60px;" class="form-group">
    <a href="{% url 'homeApp:zhuce'%}" class="btn btn-primary btn-block">注册</a>
  </div>

</body>

{% endblock %}